<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://iyuu.cn/app/user/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://iyuu.cn/app/user/js/jquery.min.js"></script>
    <script src="https://iyuu.cn/app/user/js/bootstrap.bundle.min.js"></script>
    <!--    <link href="styles.css" rel="stylesheet">-->
    <title>Card Style Radio Buttons</title>
</head>
<style>
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    @font-face {
        font-family: "阿里妈妈数黑体 Bold";
        font-weight: 700;
        src: url("https://at.alicdn.com/wf/webfont/yqAPtAtLUxDR/wxZzfzzpnaiT.woff2") format("woff2"),
        url("https://at.alicdn.com/wf/webfont/yqAPtAtLUxDR/fwRYGZ0EKwNH.woff") format("woff");
        font-display: swap;
    }

    /*button 样式*/
    .btn-animate {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 40px;
        line-height: 40px;
        border: none;
        border-radius: 5px;
        background: #ECB665;
        color: #fff;
        font-size: 15px;
        text-align: center;
        margin-top: 25px;
    }

    .btn-animate__surround {
        &::before, &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            background: #ECB665;
            transition: all 0.3s ease;
        }

        &::before {
            height: 0%;
            width: 2px;
        }

        &::after {
            width: 0%;
            height: 2px;
        }

        &:hover {
            background: transparent;

            &::before {
                height: 100%;
            }

            &::after {
                width: 100%;
            }
        }

        & > span {
            display: block;

            &:hover {
                color: #ECB665;

                &::before {
                    height: 100%;
                }

                &::after {
                    width: 100%;
                }
            }

            &::before, &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                background: #ECB665;
                transition: all 0.3s ease;
            }

            &:before {
                width: 2px;
                height: 0%;
            }

            &:after {
                width: 0%;
                height: 2px;
            }
        }
    }

    .wrap {
        display: flex;
        justify-content: space-between;
        margin: 2rem 1.25rem 1.25rem;
    }

    @media screen and (max-width: 767px) {
        .wrap {
            flex-direction: column;

            .item {
                line-height: 2.5rem;
            }
        }
    }

    .wrap .item span {
        margin-left: 5px;
    }

    h3, h4 {
        font-family: "阿里妈妈数黑体 Bold";
    }

    .card-radio-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    @media screen and (max-width: 767px) {
        .card-radio-group {
            flex-direction: column;

            .card-radio {
                width: 100%;
            }
        }
    }

    .card-radio {
        margin: 10px 0;
        width: 30%;
        cursor: pointer;
        text-align: center;
    }

    .card:hover {
        border: 1px solid #ECB665;
        color: #ECB665;
        background: #3A3E41;
        transform: scale(1.1);
        transition: all .6s;
        box-shadow: 0px 5px 20px 0px #ECB665 inset;
    }

    .card-active {
        border: 1px solid #ECB665;
        color: #ECB665;
        background: #3A3E41;
        transform: scale(1.1);
        transition: all .6s;
        box-shadow: 0px 5px 20px 0px #ECB665 inset;
    }

    .card-body {
        position: relative;
    }

    .card-body .card-text {
        font-size: 14px;
        margin: .75rem 0;
    }

    .card-badge {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-left: 45px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 45px solid #ECB665;
    }

    .card-badge:before {
        content: '√';
        display: inline-block;
        position: absolute;
        right: 10px;
        bottom: -43px;
        color: #ffffff;
        font-size: 18px;
    }

    .card-price {
        font-weight: bold;
        font-size: 18px;
    }

    .card-price span {
        font-size: 48px;
    }

    .pay {
        margin: 20px 15px;
        border: 1px solid rgba(0, 0, 0, .125);
        display: none;

        .lt {
            width: 30%;

            .item {
                position: relative;
                z-index: 99;
                text-align: center;
                padding: 15px;
                border-bottom: 1px solid rgba(0, 0, 0, .125);
                border-right: 1px solid rgba(0, 0, 0, .125);
                cursor: pointer;
            }

            .item-active {
                color: #ECB665;
                border-right: none;
            }

            /*.item:last-child {*/
            /*    border-bottom: none;*/
            /*}*/
        }

        .rg {
            width: 70%;
            display: flex;
            align-items: center;
            padding: 20px 30px;

            .img {
                /*padding: 10px;*/
                border: 1px solid rgba(0, 0, 0, .125);

                img {
                    width: 200px;
                    height: 200px;
                }
            }

            .label {
                margin-left: 30px;
                font-size: 16px;

                span {
                    font-size: 48px;
                    font-weight: bold;
                    color: #ECB665;
                }
            }
        }
    }
</style>
<body>
<div class="container mt-5">
    <h3>订阅VIP会员</h3>
    <!--文案说明-->
    <div class="wrap">
        <div class="item">
            <svg style="color: #F2A307" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
            <span>专属VIP身份徽章</span>
        </div>
        <div class="item">
            <svg style="color: #F2A307" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
            <span>模板消息每天960条</span>
        </div>
        <div class="item">
            <svg style="color: #F2A307" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
            <span>辅种接口每天1500次</span>
        </div>
        <div class="item">
            <svg style="color: #F2A307" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
            <span>每天辅种查询30万种子</span>
        </div>
        <div class="item">
            <svg style="color: #F2A307" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-lg" viewBox="0 0 16 16">
                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
            </svg>
            <span>免费的技术支持</span>
        </div>
    </div>
    <!-- 套餐模块 -->
    <div class="card-radio-group">
        <label class="card-radio">
            <div class="card" onclick="handleClick(0)">
                <div class="card-body">
                    <div class="card-badge"></div>
                    <h4 class="card-title">年卡会员</h4>
                    <p class="card-text">专属VIP身份徽章</p>
                    <div class="card-price">
                        ¥
                        <span>50</span>
                    </div>
                    <div class="btn-animate btn-animate__surround">
                        <span>立即购买</span>
                    </div>
                </div>
            </div>
        </label>
        <label class="card-radio">
            <div class="card" onclick="handleClick(1)">
                <div class="card-body">
                    <div class="card-badge"></div>
                    <h4 class="card-title">五年会员</h4>
                    <p class="card-text">辅种接口每天1500次</p>
                    <div class="card-price">
                        ¥
                        <span>150</span>
                    </div>
                    <div class="btn-animate btn-animate__surround">
                        <span>立即购买</span>
                    </div>
                </div>
            </div>
        </label>
        <label class="card-radio">
            <div class="card" onclick="handleClick(2)">
                <div class="card-body">
                    <div class="card-badge"></div>
                    <h4 class="card-title">永久会员</h4>
                    <p class="card-text">永久免费的技术支持</p>
                    <div class="card-price">
                        ¥
                        <span>300</span>
                    </div>
                    <div class="btn-animate btn-animate__surround">
                        <span>立即购买</span>
                    </div>
                </div>
            </div>
        </label>
    </div>
    <!-- 支付模块-->
    <div class="pay">
        <div class="lt">
            <div class="item item-active" onclick="handlePayClick(0)">微信扫码支付</div>
            <div class="item" onclick="handlePayClick(1)">支付宝扫码支付</div>
        </div>
        <div class="rg">
            <div class="img">
                <img src="./img/code.png" alt="">
            </div>
            <div class="label">支付金额：￥<span>1399</span></div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    let current = 0

    let payCurrent = 0

    function handleClick(index) {
        current = index
        const allCard = $('.card')
        for (let i = 0; i < allCard.length; i++) {
            if (i === index) {
                $(`.card:eq(${i})`).addClass('card-active')
                $(`.card:eq(${i}) .card-badge`).css('display', 'block')
            } else {
                $(`.card:eq(${i})`).removeClass('card-active')
                $(`.card:eq(${i}) .card-badge`).css('display', 'none')
            }
        }
        $('.pay').css('display', 'flex')
    }

    function handlePayClick(index) {
        console.log(index)
        const payItem = $('.pay .lt .item')
        for (let i = 0; i < payItem.length; i++) {
            if (i === index) {
                $(`.pay .lt .item:eq(${i})`).addClass('item-active')
            } else {
                $(`.pay .lt .item:eq(${i})`).removeClass('item-active')
            }
        }
    }

</script>
